import React, { useState } from 'react'
import { Button, Field,Toast } from 'react-vant'
import welcome from '../../images/welcome.svg'
import NavBar from '../../components/NavBar'
import { Flex,Image } from 'react-vant';
import { _checkNickname,_initNickname,_updateUser } from '../../api/login'
import nickname_css from './index.module.scss'
export default function Register() {

    const [nickName, setNickName] = useState('')//用户输入的昵称
    const [recommendNickName, setRecommendNickName] = useState([])//推荐昵称
    const [nameStatus, setNameStatus] = useState(-1)//昵称是否可用 -1昵称不合法 0不可用 1可用


    async function checkNickName(nickName){
       setNickName(nickName)
       //长度不能少于3个字符
       if(nickName==='' || nickName.length<=3) return
       await checkNickNameExist(nickName)
    }
    //检测昵称是否已存在
    async function checkNickNameExist(nickName) {
        const res = await _checkNickname(nickName).catch(err => { setNameStatus(-1) })
        if(res.duplicated===true){
            const arr = res.candidateNicknames.slice(0,5)
            setNameStatus(0)
            setRecommendNickName([...arr])
        }else if(res.duplicated===false){
            setNameStatus(1)
        }else{
            setNameStatus(-1)
        }
    }
    //使用推荐昵称
    function changeRecommendNickName(e){
        setNickName(e.target.innerHTML)
        setNameStatus(1)
    }
    //注册成功
    function registerSuccess(){
        console.log(nickName,'ssss');
        // _initNickname(nickName).then(res=>{
        //     Toast.success('注册成功')
        //     console.log(res);
        // }).catch(err => { Toast.info(err.msg || err.message) })
        _updateUser('nickname',nickName).then(res=>{
            Toast.success('注册成功')
            console.log(res);
        }).catch(err => { Toast.info(err.msg || err.message) })
    }
    return (
        <div className={nickname_css.page}>
            {/* <NavBar leftText="昵称编辑" textColor="#000" borderBottom={false}/> */}
            <Flex direction='column' align='center'>
                <Image width='200' height='200' src={welcome} />
                <span className={nickname_css.welcomeText}>Hi!你希望大家怎么称呼你呢？</span>
                <Field
                    border={false}
                    value={nickName}
                    center
                    intro={<div className={nickname_css.message}>
                                <div style={{color:(nameStatus===1)?'#666':'red'}}>
                                    { nickName.length>3&&nameStatus===-1?'昵称不符合规范':
                                        nameStatus===0?'昵称已经被注册，可以选择下列名称':
                                        nameStatus===1?'呢称可用，点击下面按钮，开启云音乐之旅':''}
                                </div>
                                <div id='reNicknameList' >{recommendNickName.length>0 && nameStatus!==1?
                                    recommendNickName.map((item,index)=>{
                                        return <span key={index} onClick={(e)=>changeRecommendNickName(e)}>{item}</span>
                                    })
                                    :''}  
                                </div>  
                            </div>}
                    placeholder='请输入昵称'
                    clearable
                    onChange={(nickName)=>checkNickName(nickName)}
                />
                <Button type='primary' block round onClick={registerSuccess}>开启云音乐</Button>
            </Flex>
        </div>

    )
}
